<template>
    <div class="detail">
        <!-- 主要内容区域 -->
        <section class="con">
            <!-- 导航路径区域 -->
            <div class="conPoin">
                <span>房屋出租</span>
                <span v-if="this.page.decorateState === 0">精美装修</span>
                <span v-if="this.page.decorateState === 1">简单装修</span>
                <span v-if="this.page.decorateState === 2">毛坯装修</span>
                <span v-if="this.page.houseType === 0">商品房</span>
                <span v-else-if="this.page.houseType === 1">公寓式住宅</span>
                <span v-else-if="this.page.houseType === 2">单元式住宅</span>
                <span v-else-if="this.page.houseType === 3">复式住宅</span>
                <el-button type="text" class="el-icon-s-help" style="margin-left: 900px;font-size: 20px" @click="dialogFormVisible = true">投诉</el-button>

                <el-dialog title="举报虚假房源" :visible.sync="dialogFormVisible">
                    <el-form :model="complaintForm">
                        <el-form-item label="投诉原因" :label-width="formLabelWidth">
                            <el-select v-model="complaintForm.reason" placeholder="请选择投诉原因">
                                <el-option label="房源已出租" value="房源已出租"></el-option>
                                <el-option label="房源不存在" value="房源不存在"></el-option>
                                <el-option label="房源位置虚假" value="房源位置虚假"></el-option>
                                <el-option label="房源价格虚假" value="房源价格虚假"></el-option>
                                <el-option label="房源视频虚假" value="房源视频虚假"></el-option>
                                <el-option label="房源描述虚假" value="房源描述虚假"></el-option>
                                <el-option label="冒充本人房源" value="冒充本人房源"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="细节名称" :label-width="formLabelWidth">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入细节内容"
                                    v-model="complaintForm.text"
                                    maxlength="100"
                                    show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="Complaint">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 主要内容区域 -->
            <div class="mainCon">
                <!-- 左侧放大镜区域 -->
                <div class="previewWrap">
                    <video-player class="video-player vjs-custom-skin"
                                  ref="videoPlayer"
                                  :playsinline="true"
                                  :options="playerOptions"
                                  @play="onPlayerPlay($event)"
                                  @pause="onPlayerPause($event)"
                                  @ended="onPlayerEnded($event)"
                                  @waiting="onPlayerWaiting($event)"
                                  @playing="onPlayerPlaying($event)"
                                  @loadeddata="onPlayerLoadeddata($event)"
                                  @timeupdate="onPlayerTimeupdate($event)"
                                  @canplay="onPlayerCanplay($event)"
                                  @canplaythrough="onPlayerCanplaythrough($event)"
                                  @statechanged="playerStateChanged($event)"
                                  @ready="playerReadied"
                    >
                    </video-player>
                    <!--          &lt;!&ndash;放大镜效果&ndash;&gt;-->
                    <!--          <Zoom />-->
                    <!--          &lt;!&ndash; 小图列表 &ndash;&gt;-->
                    <!--          <ImageList />-->
                </div>
                <!-- 右侧选择区域布局 -->
                <div class="InfoWrap">
                    <div class="goodsDetail">
                        <h3 class="InfoName">
                            {{this.page.addressInfo}}
                        </h3>
                        <p class="news">{{this.page.houseDescribe}}</p>
                        <div class="priceArea">
                            <div class="priceArea1">
                                <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                                <div class="price">
                                    <i>¥</i>
                                    <em>{{this.page.price}}</em>
                                    <span>降价通知</span>
                                </div>
                                <div class="remark">
                                    <i>累计评价</i>
                                    <em>{{this.comment.count}}</em>
                                </div>
                            </div>
                            <div class="priceArea2">
                                <div class="title">
                                    <i>发布时间</i>
                                </div>
                                <div class="fixWidth">
                                    <em class="t-gray">{{this.page.modifiedTime| formatDate}}</em>
                                </div>
                            </div>
                        </div>
                        <div class="support">
                            <div class="supportArea">
                                <div class="title">所在地：</div>
                                <div class="fixWidth">{{ this.page.address}}</div>
                            </div>
                            <div class="supportArea">
                                <div class="title">详细地址：</div>
                                <div class="fixWidth">{{ this.page.addressInfo}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="choose">
                        <div class="chooseArea">
                            <div class="choosed"></div>
                            <dl>
                                <dt class="title">面积</dt>
                                <dd changepirce="0" class="active">{{this.page.area}}m²</dd>
                                <dt class="title">租期</dt>
                                <dd changepirce="0" class="active">{{this.page.leaseTerm}}天</dd>
                            </dl>
                            <dl>
                                <dt class="title">装修类型</dt>
                                <dd changepirce="0" class="active" v-if="this.page.decorateState === 0">精美装修</dd>
                                <dd changepirce="0" class="active" v-if="this.page.decorateState === 1">简单装修</dd>
                                <dd changepirce="0" class="active" v-if="this.page.decorateState === 2">毛坯装修</dd>
                                <dt class="title">户型</dt>
                                <dd changepirce="0" class="active" v-if="this.page.houseLayout === 0">一室一厅</dd>
                                <dd changepirce="0" class="active" v-if="this.page.houseLayout === 1">两室一厅</dd>
                                <dd changepirce="0" class="active" v-if="this.page.houseLayout === 2">三室一厅</dd>
                                <dt class="title">住在类型</dt>
                                <dd changepirce="0" class="active" v-if="this.page.houseType === 0">商品房</dd>
                                <dd changepirce="0" class="active" v-else-if="this.page.houseType === 1">公寓式住宅</dd>
                                <dd changepirce="0" class="active" v-else-if="this.page.houseType === 2">单元式住宅</dd>
                                <dd changepirce="0" class="active" v-else-if="this.page.houseType === 3">复式住宅</dd>
                            </dl>
                        </div>
                        <div class="cartWrap">
                            <p class="news">
                                联系电话：{{this.page.phoneNumber}}
                            </p>
                            <div class="chat" v-show="this.pd">
                                <router-link to="/chatinfo">在线咨询</router-link>
                            </div>
                            <div class="add">
                                <button @click="ToOrder">订购</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容详情页 -->
        <section class="product-detail">
            <aside class="aside">
                <div class="tabWraped">
                    <h4 class="active">推荐房屋</h4>
                </div>
                <div class="tabContent">
                    <div class="tab-pane active">
                        <ul class="goodsList">
                            <li>
                                <div class="list-wrap" v-for="item in data" :key="item.id">
                                    <div class="p-img">
                                        <router-link :to="`/detail/${item.id}`" @click.native="load">
                                            <video :src="item.avatar" style="height: 200px;width: 200px"/>
                                        </router-link>
                                    </div>
                                    <div class="attr">
                                        <em>{{item.addressInfo}}</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i>{{item.price}}</i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <router-link :to="`/detail/${item.id}`">
                                            查看详情
                                        </router-link>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="detail">
                <div class="intro">
                    <ul class="tab-wraped">
                        <li class="active">
                            <a>
                                房屋评价
                            </a>
                        </li>
                        <li>
                            <a @click="addOrUpdateVisible=true">
                                房屋地图
                            </a>
                            <el-dialog title="房屋地图" :visible.sync="addOrUpdateVisible">
                                <Map style="margin-left: 40px"></Map>
                                <div slot="footer" class="dialog-footer" style="margin-top: 570px">
                                    <el-button @click="addOrUpdateVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="addOrUpdateVisible = false">确 定</el-button>
                                </div>
                            </el-dialog>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="top">评论<a class="count">{{this.comment.count}}</a></div>
                    </div>
                    <transition name="fade">
                        <div class="input-wrapper">
                            <el-avatar style="margin-left: 20px;margin-right: 20px;position:relative;margin-top: 10px"
                                       :size="60" :src="this.image"></el-avatar>
                            <el-input style="width: 600px"
                                      type="textarea"
                                      v-model="commentForm.content"
                                      :rows="3"
                                      autofocus
                                      placeholder="发布一条友善的评论">
                            </el-input>
                            <el-button style="height: 75px;margin-left: 30px" type="primary" @click="submitComment()">
                                确定
                            </el-button>
                        </div>
                    </transition>
                    <div class="container">
                        <div class="comment" v-for="item in comment">
                            <div class="info">
                                <el-avatar :fit="none" :size="small" :src="item.avatar"></el-avatar>
                                <!--                  <img class="avatar" :src="item.fromAvatar" width="36" height="36"/>-->
                                <div class="right">
                                    <div class="name">{{item.nickname}}</div>
                                    <div class="date">{{item.createdatetime}}</div>
                                </div>
                            </div>
                            <div class="content">{{item.content}}</div>
                            <div class="control">
        <span class="like" @click="likeClick(item.id)">
          <el-link icon="el-icon-thumb">{{item.likenum > 0 ? item.likenum + '人赞' : '赞'}}</el-link>
        </span>
                                <span class="comment-reply" @click="CommentInput(item.id,item.content)">
          <el-link icon="el-icon-chat-dot-round">{{item.replynum > 0 ? item.replynum + '人回复' : '回复'}}</el-link>

        </span>
                            </div>
                            <!--                <div class="reply">-->
                            <!--                  <div class="item" v-for="reply in item.reply">-->
                            <!--                    <div class="reply-content">-->
                            <!--                      <span class="from-name">{{reply.fromName}}</span><span>: </span>-->
                            <!--                      <span class="to-name">@{{reply.toName}}</span>-->
                            <!--                      <span>{{reply.content}}</span>-->
                            <!--                    </div>-->
                            <!--                    <div class="reply-bottom">-->
                            <!--                      <span>{{reply.date}}</span>-->
                            <!--                      <span class="reply-text" @click="showCommentInput(item, reply)">-->
                            <!--              <i class="iconfont icon-comment"></i>-->
                            <!--              <span>回复</span>-->
                            <!--            </span>-->
                            <!--                    </div>-->
                            <!--                  </div>-->
                            <!--                  <div class="write-reply" v-if="item.reply.length > 0" @click="showCommentInput(item)">-->

                            <!--                </div>-->
                        </div>
                    </div>
                    <div class="input-wrapper" v-show="showItem">
                        <el-avatar style="margin-left: 20px;margin-right: 20px;position:relative;margin-top: 10px"
                                   :size="30" :src="this.image"></el-avatar>
                        <el-input style="width: 500px"
                                  type="textarea"
                                  v-model="commentFormReply.content"
                                  :rows="2"
                                  autofocus
                                  placeholder="回复:">
                        </el-input>
                        <el-button style="height: 55px;margin-left: 30px" type="primary" @click="submitReply()">确定
                        </el-button>
                    </div>
                    <!--          分页-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.current"
                            layout="prev, pager, next"
                            :total="comment.count">
                    </el-pagination>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import Map from "./Map/Map";
    import ImageList from './ImageList/ImageList'
    import Zoom from './Zoom/Zoom'
    import {
        getOnlyById,
        getOrders,
        getCommentList,
        addComment,
        updateLikeNum,
        updateReplyNum,
        randomFour,
        complaint
    } from '@/api/index'

    export default {
        name: 'Detail',
        inject: ['reload'],
        data() {
            return {
                //投诉
                dialogFormVisible: false,
                complaintForm: {
                    reason: '',
                    text: '',
                    houseId: '',
                    userId: '',
                    touristId: '',
                    // date1: '',
                    // date2: '',
                    // delivery: false,
                    // type: [],
                    // resource: '',
                    // desc: ''
                },
                formLabelWidth: '120px',
                //相关搜索
                data: {},
                pd: false,
                pf: true,
                vmurl: undefined,
                //视频
                playerOptions: {
                    playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
                    autoplay: false, // 如果为true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 是否视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:19', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4", // 类型
                        src: this.vmurl// url地址
                    }],
                    poster: '', // 封面地址
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true, // 当前时间和持续时间的分隔符
                        durationDisplay: true, // 显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间功能
                        fullscreenToggle: true // 是否显示全屏按钮
                    }
                },
                content: undefined,
                getId: undefined,
                showItem: false,
                time: undefined,
                comment: {
                    count: undefined
                },
                ps: {
                    page: 1,
                    size: 10
                },
                uuid_token: undefined,
                image: undefined,
                page: {
                    // records: [],
                    // total: 0,
                    // size: 0,
                    // current: 0,
                    // orders: []
                },
                OrderForm: {
                    houseInfoId: undefined,
                    tourist: undefined,
                },
                commentForm: {
                    articleid: undefined,
                    content: undefined,
                    createdatetime: undefined,
                    likenum: 0,
                    nickname: undefined,
                    parentid: 0,
                    replynum: 0,
                    state: 1,
                    userid: undefined,
                    avatar: undefined
                },
                commentFormReply: {
                    articleid: undefined,
                    content: undefined,
                    createdatetime: undefined,
                    likenum: 0,
                    nickname: undefined,
                    parentid: 0,
                    replynum: 0,
                    state: 1,
                    userid: undefined,
                    avatar: undefined
                },
                // 控制新增编辑弹窗的显示与隐藏
                addOrUpdateVisible: false,
                Map:{}
            }
        },
        components: {
            ImageList,
            Zoom,
            Map
        },
        created() {
            this.getOnly();
            this.Check();
            this.CommentList();
            this.Chat();
            this.randomFour();
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '年' + MM + '月' + d + '日';
            }
        },
        methods: {
            Complaint() {
                if (sessionStorage.getItem("LoginInfo")) {
                    this.complaintForm.houseId = this.page.id;
                    this.complaintForm.userId = this.page.userId;
                    let data = JSON.parse(sessionStorage.getItem("LoginInfo"));
                    this.complaintForm.touristId = data.id;
                    if (this.complaintForm.reason == "" || this.complaintForm.text == "") {
                        this.$message({
                            message: '请填写完整相关数据',
                            type: 'error'
                        });
                    } else {
                        complaint(this.complaintForm).then(response => {
                            if (response.code == 200) {
                                this.$message({
                                    message: '恭喜你，投诉成功',
                                    type: 'success'
                                });
                                this.reload();
                            } else {
                                this.$message.error('投诉失败' + response.message);
                            }
                        })
                    }
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: "请先登录"
                    });
                    this.$router.push({path: '/login'})
                }
            },
            load() {
                this.reload();
            },
            randomFour() {
                randomFour().then(response => {
                    this.data = response.data
                    console.log(this.data)
                    // console.log(response.data)
                })
            },
            Chat() {
                if (Boolean(sessionStorage.getItem("LoginInfo"))) {
                    this.pd = true
                    this.pf = false
                }
            },
            handleSizeChange(val) {
                /* 将value赋值给size, 重新查询数据 */
                this.ps.size = val
                this.onSubmit()
            },
            handleCurrentChange(val) {
                this.ps.page = val
                this.onSubmit()
            },
            onSubmit() {
                getCommentList(this.$route.params.id, this.ps.page, this.ps.size).then(response => {
                    this.comment = response.data.content
                    // console.log(response.data)
                })
            },
            dateTime() {
                let date = new Date();
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            },
            resetFormData() {
                this.commentForm.articleid = undefined;
                this.commentForm.content = undefined;
                this.commentForm.createdatetime = undefined;
                this.commentForm.likenum = 0;
                this.commentForm.nickname = undefined;
                this.commentForm.parentid = 0;
                this.commentForm.replynum = 0;
                this.commentForm.state = 1;
                this.commentForm.userid = undefined;
                this.commentForm.avatar = undefined;
            },
            resetFormDataReply() {
                this.commentFormReply.articleid = undefined;
                this.commentFormReply.content = undefined;
                this.commentFormReply.createdatetime = undefined;
                this.commentFormReply.likenum = 0;
                this.commentFormReply.nickname = undefined;
                this.commentFormReply.parentid = 0;
                this.commentFormReply.replynum = 0;
                this.commentFormReply.state = 1;
                this.commentFormReply.userid = undefined;
                this.commentFormReply.avatar = undefined;
            },
            Check() {
                if (Boolean(sessionStorage.getItem("LoginInfo"))) {
                    let data = JSON.parse(sessionStorage.getItem("LoginInfo"));
                    this.OrderForm.tourist = data.id;
                    this.image = data.avatar;
                    this.commentForm.userid = data.id;
                    this.commentForm.nickname = data.username;
                    this.commentForm.avatar = data.avatar;
                    this.commentFormReply.userid = data.id;
                    this.commentFormReply.nickname = data.username;
                    this.commentFormReply.avatar = data.avatar;
                }
            },
            getOnly() {
                getOnlyById(this.$route.params.id).then(response => {
                    this.page = response.data
                    this.Map=response.data
                    this.playerOptions.sources[0].src = response.data.avatar
                    console.log(this.playerOptions.sources[0].src)
                    sessionStorage.setItem("MapInfo",JSON.stringify(this.Map));
                })
            },
            ToOrder() {
                this.OrderForm.houseInfoId = this.$route.params.id
                getOrders(this.OrderForm).then(response => {
                    if (response.code === 200) {
                        this.RightMessage(this, '添加成功', response.message, 'success')
                        sessionStorage.setItem("ORDERINFO", JSON.stringify(this.page))
                        this.$router.push({path: '/addsuccess'})
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: response.message
                        });
                        this.$router.push({path: '/login'})
                    }
                })
            },
            CommentList() {
                // this.$route.params.id,this.form.page,this.page.size
                getCommentList(this.$route.params.id, this.ps.page, this.ps.size).then(response => {
                    this.comment = response.data.content
                    this.comment.count = response.data.totalElements
                })
            },
            submitComment() {
                if (JSON.parse(sessionStorage.getItem("LoginInfo"))) {
                    this.commentForm.articleid = this.$route.params.id;
                    this.commentForm.createdatetime = this.dateTime();
                    addComment(this.commentForm).then(response => {
                        if (response.code == 200) {
                            this.reload();
                            this.resetFormData();
                        }
                    })
                } else {
                    alert("请先登录，才能评论")
                }

            },
            likeClick(id) {
                updateLikeNum(id).then(response => {
                    if (response.code = 200) {
                        this.reload();
                    }
                })
            },
            CommentInput(id, content) {
                this.comment = content;
                console.log(this.comment);
                this.getId = id;
                this.showItem = true;
                this.commentFormReply.articleid = this.$route.params.id;
                this.commentFormReply.createdatetime = this.dateTime();
                this.commentFormReply.parentid = id;

            },
            submitReply() {
                updateReplyNum(this.getId).then(response => {
                    if (response.code == 200) {
                        this.commentFormReply.content = "'回复：(" + this.comment + ")的信息是：'" + this.commentFormReply.content;
                        console.log(this.commentFormReply.content)
                        addComment(this.commentFormReply).then(response => {
                            if (response.code == 200) {
                                this.resetFormDataReply();
                                this.showItem = false;
                                this.reload();
                            } else {
                                console.log("内部错误")
                            }
                        })
                    } else {
                        console.log("失败！")
                    }
                })
            },
            //视频
            // 播放回调
            onPlayerPlay(player) {
                console.log('player play!', player)
            },
            // 暂停回调
            onPlayerPause(player) {
                console.log('player pause!', player)
            },
            // 视频播完回调
            onPlayerEnded($event) {
                console.log(player)
            },
            // DOM元素上的readyState更改导致播放停止
            onPlayerWaiting($event) {
                console.log(player)
            },
            // 已开始播放回调
            onPlayerPlaying($event) {
                console.log(player)
            },
            // 当播放器在当前播放位置下载数据时触发
            onPlayerLoadeddata($event) {
                console.log(player)
            },
            // 当前播放位置发生变化时触发。
            onPlayerTimeupdate($event) {
                console.log(player)
            },
            //媒体的readyState为HAVE_FUTURE_DATA或更高
            onPlayerCanplay(player) {
                // console.log('player Canplay!', player)
            },
            //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
            onPlayerCanplaythrough(player) {
                // console.log('player Canplaythrough!', player)
            },
            //播放状态改变回调
            playerStateChanged(playerCurrentState) {
                console.log('player current update state', playerCurrentState)
            },
            //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
            playerReadied(player) {
                console.log('example player 1 readied', player);
            }
        }
    }
</script>

<style lang="less" scoped>
    .top {
        margin-top: 20px;
        margin-left: 30px;
        font-size: 170%;
        font-weight: bold;

        .count {
            margin-left: 8px;
            color: #89838c;
            font-size: 85%;
        }
    }

    .container {
        padding: 0 10px;
        box-sizing: border-box;

        .comment {
            display: flex;
            flex-direction: column;
            padding: 10px;
            border-bottom: 1px solid #F2F6FC;

            .info {
                display: flex;
                align-items: center;

                .avatar {
                    border-radius: 50%;
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;
                    background-color: white;

                    .name {
                        font-size: 16px;
                        color: #303133;
                        margin-bottom: 5px;
                        font-weight: 500;
                    }

                    .date {
                        font-size: 12px;
                        color: #909399;
                    }
                }
            }

            .content {
                font-size: 16px;
                color: #303133;
                line-height: 20px;
                padding: 10px 0;
            }

            .control {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #909399;

                .like {
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    cursor: pointer;

                    &.active, &:hover {
                        color: #409EFF;
                    }

                    .iconfont {
                        font-size: 14px;
                        margin-right: 5px;
                    }
                }

                .comment-reply {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    &:hover {
                        color: #333;
                    }

                    .iconfont {
                        font-size: 16px;
                        margin-right: 5px;
                    }
                }

            }

            .reply {
                margin: 10px 0;
                border-left: 2px solid #DCDFE6;

                .item {
                    margin: 0 10px;
                    padding: 10px 0;
                    border-bottom: 1px dashed #EBEEF5;

                    .reply-content {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: #303133;

                        .from-name {
                            color: #409EFF;
                        }

                        .to-name {
                            color: #409EFF;
                            margin-left: 5px;
                            margin-right: 5px;
                        }
                    }

                    .reply-bottom {
                        display: flex;
                        align-items: center;
                        margin-top: 6px;
                        font-size: 12px;
                        color: #909399;

                        .reply-text {
                            display: flex;
                            align-items: center;
                            margin-left: 10px;
                            cursor: pointer;

                            &:hover {
                                color: #333;
                            }

                            .icon-comment {
                                margin-right: 5px;
                            }
                        }
                    }
                }

                .write-reply {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #909399;
                    padding: 10px;
                    cursor: pointer;

                    &:hover {
                        color: #303133;
                    }

                    .el-icon-edit {
                        margin-right: 5px;
                    }
                }

                .fade-enter-active, fade-leave-active {
                    transition: opacity 0.5s;
                }

                .fade-enter, .fade-leave-to {
                    opacity: 0;
                }

                .input-wrapper {
                    padding: 10px;

                    .btn-control {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        padding-top: 10px;

                        .cancel {
                            font-size: 16px;
                            color: #606266;
                            margin-right: 20px;
                            cursor: pointer;

                            &:hover {
                                color: #333;
                            }
                        }

                        .confirm {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    .detail {
        .con {
            width: 1200px;
            margin: 15px auto 0;

            .conPoin {
                padding: 9px 15px 9px 0;

                & > span + span:before {
                    content: "/\00a0";
                    padding: 0 5px;
                    color: #ccc;
                }
            }

            .mainCon {
                overflow: hidden;
                margin: 5px 0 15px;

                .previewWrap {
                    float: left;
                    width: 400px;
                    position: relative;
                }

                .InfoWrap {
                    width: 700px;
                    float: right;

                    .InfoName {
                        font-size: 18px;
                        line-height: 21px;
                        margin-top: 15px;
                    }

                    .news {
                        color: #e12228;
                        margin-top: 15px;
                        font-size: 20px;
                    }

                    .priceArea {
                        background: #fee9eb;
                        padding: 7px;
                        margin: 13px 0;

                        .priceArea1 {
                            overflow: hidden;
                            line-height: 28px;
                            margin-top: 10px;

                            .title {
                                float: left;
                                margin-right: 15px;
                            }

                            .price {
                                float: left;
                                color: #c81623;

                                i {
                                    font-size: 16px;
                                }

                                em {
                                    font-size: 24px;
                                    font-weight: 700;
                                }

                                span {
                                    font-size: 12px;
                                }
                            }

                            .remark {
                                float: right;
                            }
                        }

                        .priceArea2 {
                            overflow: hidden;
                            line-height: 28px;
                            margin-top: 10px;

                            .title {
                                margin-right: 15px;
                                float: left;
                            }

                            .fixWidth {
                                width: 520px;
                                float: left;

                                .red-bg {
                                    background: #c81623;
                                    color: #fff;
                                    padding: 3px;
                                }

                                .t-gray {
                                    color: #999;
                                }
                            }
                        }


                    }

                    .support {
                        border-bottom: 1px solid #ededed;
                        padding-bottom: 5px;

                        .supportArea {
                            overflow: hidden;
                            line-height: 28px;
                            margin-top: 10px;

                            .title {
                                margin-right: 15px;
                                float: left;
                            }

                            .fixWidth {
                                width: 520px;
                                float: left;
                                color: #999;
                            }
                        }
                    }

                    .choose {
                        .chooseArea {
                            overflow: hidden;
                            line-height: 28px;
                            margin-top: 10px;

                            dl {
                                overflow: hidden;
                                margin: 13px 0;

                                dt {
                                    margin-right: 15px;
                                    float: left;
                                }

                                dd {
                                    float: left;
                                    margin-right: 5px;
                                    color: #666;
                                    line-height: 24px;
                                    padding: 2px 14px;
                                    border-top: 1px solid #eee;
                                    border-right: 1px solid #bbb;
                                    border-bottom: 1px solid #bbb;
                                    border-left: 1px solid #eee;

                                    &.active {
                                        color: green;
                                        border: 1px solid green;
                                    }
                                }
                            }
                        }

                        .cartWrap {
                            .controls {
                                width: 48px;
                                position: relative;
                                float: left;
                                margin-right: 15px;

                                .itxt {
                                    width: 38px;
                                    height: 37px;
                                    border: 1px solid #ddd;
                                    color: #555;
                                    float: left;
                                    border-right: 0;
                                    text-align: center;
                                }

                                .plus,
                                .mins {
                                    width: 15px;
                                    text-align: center;
                                    height: 17px;
                                    line-height: 17px;
                                    background: #f1f1f1;
                                    color: #666;
                                    position: absolute;
                                    right: -8px;
                                    border: 1px solid #ccc;
                                }

                                .mins {
                                    right: -8px;
                                    top: 19px;
                                    border-top: 0;
                                }

                                .plus {
                                    right: -8px;
                                }
                            }

                            .chat {
                                float: left;
                                background-color: #5996e1;
                                padding: 0 25px;
                                font-size: 16px;
                                color: #fff;
                                height: 36px;
                                line-height: 36px;
                                display: block;
                            }

                            .add {
                                float: left;
                                margin-left: 20px;

                                button {
                                    background-color: #e1251b;
                                    padding: 0 25px;
                                    font-size: 16px;
                                    color: #fff;
                                    height: 36px;
                                    line-height: 36px;
                                    display: block;
                                }
                            }
                        }
                    }
                }
            }
        }

        .product-detail {
            width: 1200px;
            margin: 30px auto 0;
            overflow: hidden;

            .aside {
                width: 210px;
                float: left;
                border: 1px solid #ccc;

                .tabWraped {
                    height: 40px;

                    h4 {
                        border-top: 3px solid #fff;
                        float: left;
                        line-height: 37px;
                        width: 205px;
                        text-align: center;
                        border-bottom: 1px solid #ccc;

                        &.active {
                            border-top: 3px solid #e1251b;
                            border-bottom: 0;
                            font-weight: normal;
                        }
                    }
                }

                .tabContent {
                    padding: 10px;

                    .tab-pane {
                        display: none;

                        &.active {
                            display: block;
                        }

                        &:nth-child(1) {
                            .partList {
                                overflow: hidden;

                                li {
                                    width: 50%;
                                    float: left;
                                    border-bottom: 1px dashed #ededed;
                                    line-height: 28px;
                                }
                            }

                            .goodsList {
                                & > li {
                                    margin: 5px 0 15px;
                                    border-bottom: 1px solid #ededed;
                                    padding-bottom: 5px;

                                    .list-wrap {
                                        .p-img {
                                            text-align: center;

                                            img {
                                                width: 152px;
                                            }
                                        }

                                        .price {
                                            font-size: 16px;
                                            color: #c81623;
                                        }

                                        .operate {
                                            text-align: center;
                                            margin: 5px 0;

                                            a {
                                                background-color: transparent;
                                                border: 1px solid #8c8c8c;
                                                color: #8c8c8c;
                                                display: inline-block;
                                                padding: 2px 14px;
                                                line-height: 18px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .detail {
                width: 980px;
                float: right;

                .fitting {
                    border: 1px solid #ddd;
                    margin-bottom: 15px;

                    .kt {
                        border-bottom: 1px solid #ddd;
                        background: #f1f1f1;
                        color: #333;
                        padding: 5px 0 5px 15px;
                    }

                    .good-suits {
                        height: 170px;
                        padding-top: 10px;

                        .master {
                            width: 127px;
                            height: 165px;
                            text-align: center;
                            position: relative;
                            float: left;

                            img {
                                width: 87px;
                            }

                            p {
                                color: #c81623;
                                font-size: 16px;
                                font-weight: 700;
                            }

                            i {
                                position: absolute;
                                top: 48px;
                                right: -25px;
                                font-size: 16px;
                            }
                        }

                        .suits {
                            width: 668px;
                            height: 165px;
                            float: left;

                            .suitsItem {
                                float: left;
                                width: 127px;
                                padding: 0 20px;
                                text-align: center;

                                img {
                                    width: 120px;
                                    height: 130px;
                                }

                                p {
                                    font-size: 12px;
                                }

                                label {
                                    display: block;
                                    position: relative;

                                    input {
                                        vertical-align: middle;
                                    }

                                    span {
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }

                        .result {
                            border-left: 1px solid #ddd;
                            width: 153px;
                            height: 165px;
                            padding-left: 20px;
                            float: left;

                            .num {
                                font-size: 14px;
                                margin-bottom: 10px;
                                margin-top: 10px;
                            }

                            .price-tit {
                                font-weight: bold;
                                margin-bottom: 10px;
                            }

                            .price {
                                color: #B1191A;
                                font-size: 16px;
                                margin-bottom: 10px;
                            }

                            .addshopcar {
                                background-color: #e1251b;
                                border: 1px solid #e1251b;
                                padding: 10px 25px;
                                font-size: 16px;
                                color: #fff;
                                display: inline-block;
                                box-sizing: border-box;
                            }
                        }
                    }
                }

                .intro {
                    .tab-wraped {
                        background: #ededed;
                        // border: 1px solid #ddd;
                        overflow: hidden;

                        li {
                            float: left;

                            & + li > a {
                                border-left: 1px solid #ddd;
                            }

                            &.active {
                                a {
                                    // border: 0;
                                    background: #e1251b;
                                    color: #fff;
                                }
                            }

                            a {
                                display: block;
                                height: 40px;
                                line-height: 40px;
                                padding: 0 11px;
                                text-align: center;
                                color: #666;
                                background: #fcfcfc;
                                border-top: 1px solid #ddd;
                                border-bottom: 1px solid #ddd;
                            }
                        }
                    }

                    .tab-content {
                        .tab-pane {
                            display: none;

                            &.active {
                                display: block;
                            }

                            &:nth-child(1) {
                                .goods-intro {
                                    padding-left: 10px;

                                    li {
                                        margin: 10px 0;
                                    }
                                }

                                .intro-detail {
                                    img {
                                        width: 100%;
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    }
</style>
